<template>
  <div class="typepage">
    <div class="title">
      <p>最新发布</p>
      <p>离我最近</p>
      <p>薪资最高</p>
    </div>
    <div class="type_ul">
      <div class="type_it">
        <div
          :class="{ active: index == 0 }"
          v-for="(item, index) in liArr"
          :key="index"
        >
          <p @click="btn(index)">{{ item }}</p>
        </div>
      </div>
    </div>
    <div class="type_item">
      <xia />
    </div>
  </div>
</template>

<script>
import xia from "@/allwork/xia";
export default {
  data() {
    return {
      index: 0,
      liArr: ["全部", "精选线上", "精选导购"],
    };
  },
  methods: {
    btn(i) {
      console.log(i);
      this.index = i;
    },
  },
  components: {
    xia,
  },
};
</script>
<style lang="scss">
.typepage {
  width: 100%;
  height: 1520px;
  background-image: url("./img/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  .title {
    display: flex;
    justify-content: space-around;

    p {
      margin-top: 100px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 91px;
    }
  }
  .type_ul {
    .type_it {
      display: flex;
      justify-content: space-around;
      div {
        background-color: #ffffff;
        width: 152px;
        height: 58px;

        border-radius: 50px;
        text-align: center;
        line-height: 58px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 54px;
      }
      .active {
        background-color: #465889;
        color: #ffffff;
      }
    }
  }
  .type_item {
    width: 684px;
    height: 868px;
    background: #ffffff;
    border-radius: 10px;
    margin: 20px auto;
    overflow: scroll;
    .xia .list {
      width: 37.625rem;
      border: 1px solid #f3efef;
    }
  }
}
</style>
